<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 730px;
      height: 454px;
      padding: 8px;
      border: 1px solid green;
      margin: 100px auto;
    }

    .inner {
      position: relative;
      overflow: hidden;
      height: 454px;
    }

    #imglist {
      width: 700%;
      position: absolute;
      left: 0;
      transition: left 300ms linear;
    }

    li {
      float: left;
    }

    .list {
      position: absolute;
      bottom: 20px;
      left: 50%;
      margin-left: -85px;
    }

    .list i {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      color: #333;
      float: left;
      font-style: normal;
      line-height: 20px;
      font-size: 14px;
      text-align: center;
      margin-right: 10px;
      cursor: pointer;
    }

    .list i:last-child {
      margin-right: 0;
    }

    .list i.current {
      background-color: skyblue;
      color: #fff;
    }

    .arrow {
      position: absolute;
      width: 100%;
      top: 50%;
      margin-top: -30px;
    }

    .arrow-left,
    .arrow-right {
      width: 30px;
      height: 60px;
      position: absolute;
      font: 20px/60px "consolas";
      color: #fff;
      background-color: rgba(0, 0, 0, .3);
      text-align: center;
      cursor: pointer;
    }

    .arrow-right {
      right: 0;
    }
  </style>
</head>

<body>
  <div class="box" id="box">
    <div class="inner" id="inner">
      <ul id="imglist">
        <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
      </ul>
      <div class="list">
        <i class="current">1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
        <i>6</i>
      </div>
      <div class="arrow">
        <span class="arrow-left">&lt;</span>
        <span class="arrow-right">&gt;</span>
      </div>
    </div>
  </div>

</body>
<script>
  //  效果：
  //   1.序号轮播
  //   2.点击左右按钮轮播
  //   3.自动轮播
  //   4.鼠标悬停在轮播图上面的时候，停止自动轮播，离开就继续自动轮播
  // 实现序号轮播-----------------------
  window.onload=function(){ 
   // 使用一个变量表示当前是第几张图片
   var currentIndex = 0;  
    // 1.1 获取元素 (小圆点，ul)
    var xuhao=document.querySelectorAll('.list>i');
    var list=document.getElementById('imglist');
    // 定义一个变量，保存一个图片的宽度
    var imgwidth=list.children[0].offsetWidth;
    // 1.2 遍历给序号注册鼠标移入事件
    xuhao.forEach(function(e,i){
      e.onmouseover=function(){
        currentIndex=i;
        // 1.3 计算出ul应该在的位置
        // ul的位置 = 图片的宽度 * 对应的索引 * -1
        var weizhi=imgwidth *i * -1;
        // 1.4 设置给ul
        list.style.left=weizhi+'px';
         // 排他的设置小圆点的样式
         xuhao.forEach(function(a){
          a.classList.remove('current');
         });
         xuhao[currentIndex].classList.add('current');
      }
    });
      // 使用一个变量表示当前是第几张图片
      var currentIndex = 0;
    
    // 2.1实现左右按钮轮播---------------------
    var leftbtn=document.querySelector('.arrow-left');
    var rightbtn=document.querySelector('.arrow-right');
    rightbtn.onclick=moveRight;
    function moveRight(){
      // 如果已经是最后一张，让它切换到第0张
      if(currentIndex===list.children.length-1){
        currentIndex=0;
      }else{
        // 让表示第几张图片的变量++
        currentIndex++;
      } 
      // 算出ul的位置
      var target=currentIndex*imgwidth*-1;
      // 设置ul的位置
      list.style.left=target+'px';

      // 利用排他处理小圆点
      xuhao.forEach(function(f){
        f.classList.remove('current');
      })
      xuhao[currentIndex].classList.add('current'); 
    }
    


// 左边左滑
    leftbtn.onclick=function(){
      if(currentIndex===0){
        currentIndex=list.children.length-1;
      }else{
        currentIndex--;    
      }
      var target=currentIndex*imgwidth*-1;  
      list.style.left=target+'px';
      xuhao.forEach(function(n){ 
        n.classList.remove('current');
      })
      xuhao[currentIndex].classList.add('current');
    }



    // 实现一个自动轮播---------------------------------
    // 利用永久定时器
    var timer=setInterval(function(){
      moveRight();
    },2000)
    // var times=setInterval(moveRight,2000);
    // 鼠标移入移出
    // 给轮播图移入事件，把定时器停止
    var box = document.getElementById('box');
    box.onmouseover=function(){
    
      clearInterval(timer);
      console.log(123);
    }
    box.onmouseout=function(){
      timer=setInterval(function(){
      moveRight();
    },2000);
    }


  }
  


</script>
</html>